<!--/**
* @author xuyh0817
* @email xuyh0817@foxmail.com
* @date 2022-02-16 15:58
* @version 2.0.0
* @doc todo
* @website todo
* @remark  如果要分发源码，需在本文件顶部保留此文件头信息！！
*/
-->
<template>
  <a-row v-if="hasInput" :gutter="16">
    <a-col :span="3">
      <a-input-number
          :value="currentBegin"
          v-bind="inputNumberAttrs"
          @change="inputChangeHandler($event,true)"
      />
    </a-col>

    <a-col :span="18">
      <a-slider
          :value="currentValue"
          v-bind="attrs"
          :marks="marks"
          :range="true"
          @change="changeHandler"
      />
    </a-col>

    <a-col :span="3">
      <a-input-number
          :value="currentEnd"
          v-bind="inputNumberAttrs"
          @change="inputChangeHandler($event,false)"
      />
    </a-col>
  </a-row>

  <a-slider
      v-else
      :value="currentValue"
      v-bind="attrs"
      :marks="marks"
      :range="true"
      @change="changeHandler"
  />
</template>

<script>
import {COMPONENT_TYPE, CUSTOM_EVENT_TYPE} from '../../constants'
import ComponentMixin from '../../XRenderMixins/XRenderComponentMixin'

export default {
  name: COMPONENT_TYPE.SLIDER_DOUBLE,
  mixins: [ComponentMixin],
  props: {
    value: {
      type: [Array, String]
    }
  },
  computed: {
    currentValue: {
      get() {
        const {value, formItem, isDebug} = this
        if (typeof (value) !== 'string' && !(value instanceof Array)) {
          isDebug ? console.warn(`${formItem.prop} value类型错误,非String或Array`) : ''
          return []
        }
        if (value instanceof Array) {
          return value || []
        }
        return value.split(',') || []
      }
    },
    currentBegin: {
      get() {
        const {currentValue} = this
        const [begin] = currentValue
        return begin ? (typeof (begin) === 'number' ? begin : 0) : 0
      }
    },
    currentEnd: {
      get() {
        const {currentValue} = this
        const [, end] = currentValue
        return end ? (typeof (end) === 'number' ? end : 0) : 0
      }
    },
    marks: {
      get() {
        const {attrs, formItem, isDebug} = this
        const {marks} = attrs
        if (typeof (marks) !== 'string' && typeof (marks) !== 'object') {
          isDebug ? console.warn(`${formItem.prop} marks类型错误,非String或Object`) : ''
          return {}
        }
        if (typeof (marks) === 'object') {
          return marks
        }
        return (new Function('return ' + marks))()
      }
    },
    hasInput: {
      get() {
        const {attrs} = this
        const {hasInput} = attrs
        return !!hasInput && typeof (hasInput) === 'boolean' ? hasInput : false
      }
    },
    inputNumberAttrs: {
      get() {
        const {attrs} = this
        const {max, min, step} = attrs
        return {
          max,
          min,
          step
        }
      }
    }
  },
  methods: {
    changeHandler(value) {
      const {formItem, attrs} = this
      this.$emit(CUSTOM_EVENT_TYPE.CHANGE, {
        type: COMPONENT_TYPE.SLIDER_DOUBLE,
        prop: this.formItem ? this.formItem.prop : '',
        value,
        attrs,
        formItem
      })
    },
    inputChangeHandler(value, isBegin) {
      const {formItem, attrs, currentEnd, currentBegin} = this
      const currentValue = isBegin ? [value, currentEnd] : [currentBegin, value]
      this.$emit(CUSTOM_EVENT_TYPE.CHANGE, {
        type: COMPONENT_TYPE.SLIDER_DOUBLE,
        prop: formItem ? formItem.prop : '',
        value: currentValue,
        attrs,
        formItem
      })
    }
  }
}
</script>

<style scoped>

</style>
